{extend name="public/common"}

{block name="style"}
<title>活动报名</title>
<link rel="stylesheet" href="/index/css/activity/index.css">
<style>
    .sign-up-box{
        /*padding-bottom: 4vw;*/
    }
    #app .textarea-box{
        color: #666;
    }
    .active-title{
        height:40vw;
    }
    .mint-popup{
        width: 100%;
    }
    .active-know{
        color: #999;
        font-size: 1.3rem;
        text-align: center;
        line-height: 2;
        margin: 0.6rem 0;
    }
    .active-know>span{
        color: #69B9F9;
    }
    .btn-box{
        margin-top: 3rem;
    }
    .btn{height:4rem;line-height:4rem;  border-radius:5px;font-size:1.5rem}
</style>
{/block}

{block name="body"}
<div id="app">
    <div class="active-item sign-up" :style="'background-image: url('+ baseInfo.front_cover +')'" >
        <div class="my-icon-flag my-icon-hot" v-if="baseInfo.status == 2" ><span>HOT</span></div>
        <div class="my-icon-flag " v-if="baseInfo.status == 1" ><span>预</span></div>
        <div class="active-info"></div>
    </div>
    <div class="sign-up-box">
        <div class="active-title "></div>
        <div class="sign-up-info">
            <div class="table-box">
                <div class="table-row-box">
                    <div class="table-row">
                        <span class="table-row-header">活动类型</span>
                        <span @click="togglePopup" class="select-box"><span :class="{'select-color':!nowType}" v-text="nowType?(nowType.name+'（'+nowType.number+'人)'):'请选择活动类型'"></span> <i class="allow-right"></i></span>
                    </div>
                    <div class="table-row" v-if="nowType.price">
                        <span class="table-row-header">活动价格</span>
                        <span v-if="nowType.price===0">免费</span>
                        <span v-else>￥{{nowType.price}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="sign-up-info" v-for="item in subData.activity_people">
            <div class="table-box">
                <div class="table-row-box">
                    <!--<div class="table-row-block-header bottom_line"></div>-->
                    <div class="table-row">
                        <span class="table-row-header">出行人姓名</span>
                        <input type="text" class="table-row-input" placeholder="必填" v-model="item.name">
                    </div>
                    <div class="table-row" >
                        <span class="table-row-header">电话</span>
                        <input type="text" class="table-row-input" placeholder="必填" v-model="item.mobile">
                    </div>
                    <div class="table-row">
                        <span class="table-row-header">身份证号码</span>
                        <input type="text" class="table-row-input" placeholder="必填" v-model="item.people_card">
                    </div>
                    <div class="table-row" >
                        <span class="table-row-header">紧急联系人电话</span>
                        <input type="text" class="table-row-input" placeholder="必填" v-model="item.emergency_contact">
                    </div>
                </div>
            </div>
        </div>
        <div class="sign-up-info">
            <div class="table-box">
                <div class="table-row-box">
                    <!--<div class="table-row-block-header bottom_line"></div>-->
                    <div class="table-row">
                        <span class="table-row-header">联系人姓名</span>
                        <input type="text" class="table-row-input" placeholder="必填" v-model="subData.name">
                    </div>
                    <div class="table-row">
                        <span class="table-row-header">电话</span>
                        <input type="text" class="table-row-input" placeholder="必填" v-model="subData.mobile">
                    </div>
                    <div class="table-row-block table-row-last">
                        <div class="table-row-block-header">备注信息</div>
                        <textarea cols="30" rows="10" placeholder="选填" v-model="subData.remark"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-box" v-show="modal.isShow">
            <div class="modal-bg"  @click="toggleModal"></div>
            <div class="modal-content">
                <div v-html="baseInfo.registration_required"></div>
            </div>
        </div>
        <mt-popup  position="bottom"  v-model="typeVisible" class="mint-popup">
            <div class="picker-toolbar">
                <span class="mint-datetime-action mint-datetime-cancel" @click="togglePopup">取消</span>
                <span class="mint-datetime-action mint-datetime-confirm" @click="selectType">确定</span>
            </div>
            <mt-picker :slots="typeSlots" @change="onTypeChange" value-key="name"></mt-picker>
        </mt-popup>
        <div class="btn-box">
            <div class="btn btn-block btn-success" @click="ajaxPost">前往支付</div>
        </div>
        <div class="active-know" v-if="baseInfo.registration_required">提交代表您已阅<span  @click="toggleModal">《活动须知》</span></div>
    </div>
</div>
{/block}

{block name="script"}
<script>
    var info = {$data};
    console.log(info)
window.sessionStorage.setItem('IdNumber', info.activity_id);
//    window.location.href='/index/users/getlist';
    var app = new Vue({
        el: '#app',
        data: {
            baseInfo:info,
            subData:{
                name:'',
                mobile:'',
                remark:'',
                activity_id:'',
                activity_people:[]
            },
            typeSlots:[
                {
                    defaultIndex:1,
                    values:info.type
                }
            ],
            modal:{
                isShow:false
            },
            nowType:'',
            checkRoom:'',
            typeVisible:false,
        },
        created(){
            var _this = this;
            _this.$nextTick(function() {
                setTimeout(function() {
                    _this.typeSlots[0].defaultIndex = 0;
                }, 100);
            });
            var userInfo = window.sessionStorage.getItem('userInfo');
            if(userInfo!== null){
                Object.assign(_this.subData,JSON.parse(userInfo));
            }
            console.log(_this.subData)
        },
        methods: {
            toggleModal(){
                var _this = this;
                _this.modal.isShow = !_this.modal.isShow;
            },
            togglePopup(){
                    this.typeVisible = !this.typeVisible ;
            },
            selectType:function () {
                var _this = this;
                _this.togglePopup();
                var info = {
                    name:'',
                    mobile:'',
                    people_card:'',
                    emergency_contact:''
                };
                _this.subData.activity_people = [];
                for(var i = 0;i<_this.checkRoom.number;i++){
                    _this.subData.activity_people.push(info);
                }
                //v-for 下 v-model 各item对应属性关联bug 解决：深复制再赋值
                var infoCopy = JSON.parse(JSON.stringify(_this.subData.activity_people));
                _this.subData.activity_people = infoCopy;

                _this.nowType=this.checkRoom;

            },
            onTypeChange:function (p,v) {
                var _this = this;
                if(v[0]){
                    _this.checkRoom = v[0];
                }
            },
            ajaxPost(){
                var _this = this;
                if(!_this.nowType){
                    _this.$toast({
                        message: '请选择活动类型~',
                        position: 'bottom',
                        duration: 2000
                    });
                    return ;
                }else if(_this.nowType){
                    for(var i = 0 ;i<_this.subData.activity_people.length;i++){
                        for(var key in _this.subData.activity_people[i]){
                            if(!_this.subData.activity_people[i][key]){
                                _this.$toast({
                                    message: '请输入全部出行人信息~',
                                    position: 'bottom',
                                    duration: 2000
                                });
                                return;
                            }
                        }
                    }
                }else if(_this.subData.name===''){
                    _this.$toast({
                        message: '请输入订单联系人姓名~',
                        position: 'bottom',
                        duration: 2000
                    });
                    return ;
                }else if(!_this.subData.mobile){
                    _this.$toast({
                        message: '请输入订单联系人电话~',
                        position: 'bottom',
                        duration: 2000
                    });
                    return ;
                }
                if(_this.isSubmit){
                    _this.$toast({
                        message: '提交中···',
                        position: 'bottom',
                        duration: 2000
                    });
                    return ;
                }
                _this.subData.activity_id = _this.baseInfo.activity_id;
                _this.subData.typeid = _this.nowType.typeid;
                _this.isSubmit = true;
                _this.$indicator.open({
                    text: '提交中',
                    spinnerType: 'triple-bounce'
                });
                _this.$http.post('/index/activity/wxPay',_this.subData).then(function (res) {
                    _this.$indicator.close();
                    _this.isSubmit = false;
                    if(res.data.code===1){
                        var userInfo = {
                            name:_this.subData.name,
                            mobile:_this.subData.mobile
                        };
                        window.sessionStorage.setItem('userInfo',JSON.stringify(userInfo));
                        WeixinJSBridge.invoke(
                            'getBrandWCPayRequest', JSON.parse(res.data.data),
                            function(res){
//                                alert(JSON.stringify(res));

                                if(res.err_msg == "get_brand_wcpay_request:ok") {
                                           swal({
                                               title: '',
                                               text: '报名成功！',
                                               type:'success',
                                               confirmButtonColor: "#69B9F9",
                                               confirmButtonText: "确定"
                                           },function () {
                                               window.location.href='/index/users/getlist';
                                           });
                                } else {
                                    swal({
                                        title: '',
                                        text: '支付失败！',
                                        type:'error',
                                        confirmButtonColor: "#69B9F9",
                                        confirmButtonText: "确定"
                                    },function () {
//                                        window.location.href='/index/activity/index'
                                    });
                                }
                                // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
                            }
                        );
                 /*       swal({
                            title: '',
                            text: '报名成功！',
                            type:'success',
                            confirmButtonColor: "#69B9F9",
                            confirmButtonText: "确定"
                        },function () {
                            window.location.href='/index/activity/index'
                        });*/
                    }else{
                        swal({
                            title: '请输入必填项',
                            text: res.data.msg,
                            type:'error',
                            confirmButtonColor: "#69B9F9",
                            confirmButtonText: "确定"
                        },function () {
                            if(res.data.url){
                                window.location.href=res.data.url;
                            }
                        });
                    }
                },function (res) {
                    _this.$indicator.close();
                    _this.isSubmit = false;
                    swal({
                        title: '',
                        text: '提交失败，请重试！',
                        type:'error',
                        confirmButtonColor: "#69B9F9",
                        confirmButtonText: "确定"
                    },function () {

                    });
                })
            },
            titleWarp(title){
                var title = title;
                if(title){
                    title  =  title.split('');
                    var len = title.length;
                    if(len>12){
                        title[Math.floor(len/2)] += '<br/>';
                    }
                    title = title.join('')
                }
                return title;
            }
        }
    })
</script>
{/block}